<template>
  <div class="index">
    <head-view></head-view>
    <div class="main">
      <h1 class="title">高考周报 <i class="el-icon-arrow-right"></i></h1>
      <div class="p" v-for="item in news" :key="item.id">
        <h2>
          <span>{{ item.number }}</span
          ><i class="el-icon-position"></i>{{ item.title }}
        </h2>
        <div class="content">
          <i class="el-icon-edit"></i>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      news: []
    }
  },
  created () {
    this.$http.get('news/list').then(res => {
      if (res.err > 0) {
        console.error(res.desc)
      } else {
        this.news = res.result
      }
    })
  }
}
</script>

<style scoped>
.main {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.main .title {
  margin-top: 50px;
  margin-bottom: 0;
}
.main .p{
  margin-top: 20px;
}
.main h2 {
  font-size: 20px;
  font-weight: normal;
  line-height: 60px;
}

.main h2 span {
  font-weight: 700;
  text-decoration: underline;
}
.main h2 i {
  font-size: 24px;
  color: red;
  padding: 0 20px;
}
.main .content {
  font-size: 14px;
  padding: 0 10px;
  display: flex;
}
.main .content i {
  padding-right: 22px;
  font-size: 20px;
  font-weight: 700;
}
.main .content p {
  width: 1200px;
  word-break: break-all;
}
</style>
